<template>
  <div class="box">
    <div class="days">
      <div class="col">
        <h2>每天排号个数</h2>
        <el-button type="primary" style="height:32px" @click="dialogVisible = true">设置</el-button>
        <el-dialog
          title="排号个数"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
          :show-close="false"
        >
          <el-form
            ref="setdateNum"
            :rules="setdateNum"
            :inline="true"
            :model="formTime"
            class="cardNum demo-form-inline"
          >
            <el-form-item prop="forenoon" label="上午">
              <el-input v-model="formTime.forenoon" placeholder="请输入个数"></el-input>
            </el-form-item>
            <el-form-item prop="afternoon" label="下午">
              <el-input v-model="formTime.afternoon" placeholder="请输入个数"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setTime">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <el-tabs type="border-card">
        <el-table class="table" :data="tableData" style="width: 100%">
          <el-table-column prop="forenoon" label="上午" align="center"></el-table-column>
          <el-table-column prop="afternoon" label="下午" align="center"></el-table-column>
        </el-table>
      </el-tabs>
    </div>
    <div class="special">
      <div class="col">
        <h2>特殊日期排号</h2>
        <div>
          <el-button type="primary" style="height:32px;" @click="specialVisible = true">添加</el-button>
          <el-button
            type="primary"
            style="height:32px;"
            :disabled="isDisable"
            @click="deletePl"
          >批量删除</el-button>
        </div>
        <el-dialog
          width="30%"
          title="排号个数"
          :visible.sync="specialVisible"
          :before-close="handleClose"
          :show-close="false"
        >
          <el-form
            ref="formTimes"
            :rules="setformTimes"
            :inline="true"
            :model="formTimes"
            class="cardNum"
          >
            <el-form-item required label="日期" prop="dates">
              <el-date-picker
                v-model="formTimes.dates"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="上午" prop="forenoon">
              <el-input v-model="formTimes.forenoon" placeholder="请输入个数"></el-input>
            </el-form-item>
            <el-form-item label="下午" prop="afternoon">
              <el-input v-model="formTimes.afternoon" placeholder="请输入个数"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="specialVisible = false">取 消</el-button>
            <el-button type="primary" @click="setCol">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <el-tabs type="border-card">
        <el-table
          class="table"
          @selection-change="selectChange"
          :data="tableDatas"
          style="width: 100%"
        >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column prop="date" label="日期" width="150" align="center"></el-table-column>
          <el-table-column prop="erverDayAfter" label="上午" align="center"></el-table-column>
          <el-table-column prop="erverDayEven" label="下午" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-link
                type="danger"
                @click="deleteTs(scope.row)"
                icon="el-icon-delete"
                size="small"
              >删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      setdateNum: {
        forenoon: [
          { required: true, message: "请输入上午排号个数", trigger: "blur" },
        ],
        afternoon: [
          { required: true, message: "请输入下午排号个数", trigger: "blur" },
        ],
      },
      setformTimes: {
        dates: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        forenoon: [
          { required: true, message: "请输入上午排号个数", trigger: "blur" },
        ],
        afternoon: [
          { required: true, message: "请输入下午排号个数", trigger: "blur" },
        ],
      },
      specialVisible: false,
      dialogVisible: false,
      date: "",
      pickerOptions: {
        disabledDate (time) {
          // return time.getTime() < Date.now() - 8.64e7;
        },
      },

      formTime: {
        forenoon: 30,
        afternoon: 30,
      },
      formTimes: {
        forenoon: 30,
        afternoon: 30,
        dates: "",
        startTime: "",
        endTime: "",
        number: "",
      },
      date: "",

      tableData: [
        {
          forenoon: "",
          afternoon: "",
        },
      ],
      tableDatas: [],
      //批量删除数组
      checkedTemplat: [],
    };
  },
  computed: {
    // 删除按钮禁用状态
    isDisable() {
      return !this.checkedTemplat.length;
    },
  },
  methods: {
    // dealDisabledDate(time) {
    //   // console.log(time);
    //   return time.getTime() < Date.now() - 8.64e7;
    // },
    requst() {
      tableData = [];
      tableDatas = [];
      this.$http.get("").then((result) => {
        // //console.log(result);
      });
    },
    setCol() {
      this.$refs.formTimes.validate((valid) => {
        if (valid) {
          this.specialVisible = false;
          // this.formTimes.startTime = `${this.date} ${this.startTime}:00`;
          // this.formTimes.endTime = `${this.date} ${this.endTime}:00`;
          this.$http
            .post("/trademark/proBusinessNum/addNumOfDay", {
              erverDayAfter: this.formTimes.forenoon,
              erverDayEven: this.formTimes.afternoon,
              changeDate: this.formTimes.dates,
              type: 1,
            })
            .then((result) => {
              this.getTimes();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    setTime() {
      // setdateNum
      this.$refs.setdateNum.validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          this.$http
            .post("/trademark/proBusinessNum/addNumOfDay", {
              erverDayAfter: this.formTime.forenoon,
              erverDayEven: this.formTime.afternoon,
              type: 0,
            })
            .then((result) => {
              this.getTimees();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose(done) {
      done();
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     done();
      //   })
      //   .catch((_) => {});
    },
    getTimees() {
      this.$http
        .get("/trademark/proBusinessNum/findAllType?type=0")
        .then((result) => {
          let data = result.data.data;
          // //console.log(result);
          //console.log(data);
          this.tableData[0].afternoon = data[0].erverDayEven;
          this.tableData[0].forenoon = data[0].erverDayAfter;
          // this.tableDatas[0].data = data.dateFestivalStart.slice(0, 10);
          // this.tableDatas[0].startTime = data.dateFestivalStart.slice(11, 19);
          // this.tableDatas[0].endTime = data.dateFestivalEnd.slice(11, 19);
          // this.tableDatas[0].number = data.numOfFestival;
        });
    },
    getTimes() {
      this.$http
        .get("/trademark/proBusinessNum/findAllType?type=1")
        .then((result) => {
          let data = result.data.data;
          let obj = {};
          // //console.log(data);
          this.tableDatas = data.map((item) => {
            let timer = new Date(item.changeDate);
            item.date = `${timer.getFullYear()}-${
              timer.getMonth() + 1
            }-${timer.getDate()}`;
            return item;
          });
          //console.log(this.tableDatas);

          // for (let i=0; i< data.length; i++){
          //     obj.afternoon = data[i].erverDayEven;
          //     obj.forenoon = data[i].erverDayAfter;
          //     let timer = new Date(data[i].changeDate);
          //     obj.date = `${timer.getFullYear()}-${timer.getMonth()}-${timer.getDate()}`;
          //     this.tableDatas.push(obj)
          // }

          // this.tableDatas[0].data = data.dateFestivalStart.slice(0, 10);
          // this.tableDatas[0].startTime = data.dateFestivalStart.slice(11, 19);
          // this.tableDatas[0].endTime = data.dateFestivalEnd.slice(11, 19);
        });
    },
    // 选中事件
    selectChange(selection) {
      this.checkedTemplat = selection;
    },
    //删除请求
    deleteList(arr) {
      this.$http
        .post("/trademark/proBusinessNum/delByids", JSON.stringify(arr))
        .then(
          ({ data: response }) => {
            if (response.code !== 200) return this.$message.error("删除失败");
            this.getTimes();
            this.$message.success("删除成功");
          },
          (err) => err
        )
        .finally(() => (this.loading = false));
    },
    //删除
    deleteTs({ id }) {
      var confirm = this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((re) => {
          let arr = [];
          arr.push(id);
          this.deleteList(arr);
        })
        .catch((cancle) => cancle);
    },
    //批量删除
    deletePl() {
      var confirm = this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((re) => {
          let arr = [];
          for (let i = 0; i < this.checkedTemplat.length; i++) {
            arr.push(this.checkedTemplat[i].id);
          }
          this.deleteList(arr);
        })
        .catch((cancle) => cancle);
    },
  },
  mounted() {
    this.getTimees();
    this.getTimes();
  },
};
</script>
<style lang="less" scoped>
.box {
  display: flex;
  justify-content: flex-start;
}
.days,
.special {
  width: 48%;
  margin: 0 10px;
  .el-input {
    width: 180px;
  }
  .col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px 0;
    h2 {
      margin: 0;
      padding: 0;
      list-style: none;
      font-weight: bold;
    }
  }
  .table {
    .tiao {
      color: #fff;
      text-decoration: none;
    }
  }
}
.cardNum {
  text-align: center;
}
.el-form--inline .el-form-item{
  display: block!important;
}

</style>
